<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<SCRIPT language="javascript">
	function add(type) {

		//Create an input type dynamically.
		var element = document.createElement("input");

		//Assign different attributes to the element.
		element.setAttribute("type", type);
		element.setAttribute("value", type);
		element.setAttribute("name", type);

		var foo = document.getElementById("fooBar");

		//Append the element in page (in span).
		foo.appendChild(element);

	}
</SCRIPT>
</head>
<body>
	<FORM>
		<H2>Dynamically add element in form.</H2>
		Select the element and hit Add to add it in form. <BR /> <SELECT
			name="element">
			<OPTION value="button">Button</OPTION>
			<OPTION value="text">Textbox</OPTION>
			<OPTION value="radio">Radio</OPTION>
		</SELECT>   <INPUT type="button" value="Add"
			onclick="add(document.forms[0].element.value)" />   <span
			id="fooBar">&nbsp;</span>  
	</FORM>
</body>
</html>